<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>foster_family</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet"
	href="//y.gtimg.cn/mediastyle/yqq/layout_0321.css?max_age=25920000&v=20190312" />
<link rel="stylesheet"
	href="//y.gtimg.cn/mediastyle/yqq/toplist.css?max_age=25920000&v=20180129" />
<link
	href="${pageContext.request.contextPath}/frontdevel/css/style1.css"
	rel='stylesheet' type='text/css' />
<jsp:include page="header.jsp"></jsp:include>
</head>
<body>
	<!--start-home-->
	<div id="home" class="header">
		<!-- 顶部导航栏 -->
		<jsp:include page="topbar.jsp"></jsp:include>
		<!-- 顶部导航栏结束 -->

		<div class="banner">
			<div class="container">
				<ul id="flexiselDemo3">
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s3.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s3.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<script type="text/javascript">
				$(window).load(function() {
					$("#flexiselDemo3").flexisel({
						visibleItems : 3,
						animationSpeed : 1000,
						autoPlay : true,
						autoPlaySpeed : 3000,
						pauseOnHover : true,
						enableResponsiveBreakpoints : true,
						responsiveBreakpoints : {
							portrait : {
								changePoint : 480,
								visibleItems : 3
							},
							landscape : {
								changePoint : 640,
								visibleItems : 3
							},
							tablet : {
								changePoint : 768,
								visibleItems : 3
							}
						}
					});

				});
			</script>
			<script type="text/javascript"
				src="${pageContext.request.contextPath}/frontdevel/js/jquery.flexisel.js"></script>
		</div>
	</div>

	<!-- foster_family -->
	<div id="news" class="w3ls-section services news">
		<div class="container">
			<h3 class="agileits-title">FosterFamily</h3>
			<div class="news-agileinfo" id="showallfosterfamily">
				
						
				<div class="clearfix"></div>
			</div>
		</div>
			<div id="demo7"></div>
	</div>

	<!-- //foster_family -->
	<!--swipebox -->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath}/frontdevel/css/swipebox.css">
	<script
		src="${pageContext.request.contextPath}/frontdevel/js/jquery.swipebox.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
	<!-- 	<script src="js/jquery.min.js"></script>
	<script src="js/script.js"></script> -->
	<script type="text/javascript">
		 
		 $(function () {
			    initLayPage();
			});

			/**
			 * 初始化layui分页
			 */

			function initLayPage(pageConf) {
			    if(!pageConf){
			        pageConf ={};
			        pageConf.pageSize = 3;
			        pageConf.currentPage = 1;
			        
			    }
			    $.get("../fosterFamilyBypage1?content=1&page="+pageConf.currentPage+"&limit="+pageConf.pageSize, function (data) {
			        layui.use(['laypage', 'layer'], function () {
			            var page = layui.laypage;  
			            page.render({
			                elem: 'demo7', 
			                count: data.count,
			                curr: pageConf.currentPage,
			                limit: pageConf.pageSize,
			                first:"首页",
			                last:"尾页",
			                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
			                jump: function (obj, first) {
			                    if (!first) {
			                        pageConf.currentPage = obj.curr;
			                        pageConf.pageSize = obj.limit;
			                        initLayPage(pageConf);
			                    }
			                }
			            });
			            fillTable(data.data,(pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
			        })
			    });
			}
			//填充表格数据
			function fillTable(data,num) {
			    var info = '';
			    $.each(data, function (index, obj) {
			        // id 很多时候并不是连续的，如果为了显示比较连续的记录数，可以这样根据当前页和每页条数动态的计算记录序号
			        index = index +num+1;
			        info += "<div class='col-sm-4 news-w3lgrids'>"
						+"<div class='news-gridtext'>"
						+"<div class='news-w3img' style=' width: 300px; height: 350px;'>"
							+"<a href='fosterFamilyDetails.jsp?name="+obj.uname+"&url="+obj.fenvimageurl+"&add="+obj.uaddress+"&type="+obj.frecepettype+"&content="+obj.fservices+"'><img src='/ima/"+obj.fenvimageurl+"' class='img-responsive zoom-img' alt='' style='width: 300px; height: 350px;margin-left: 40px;' /></a>"
						+"</div>"
						+"<div class='news-w3imgtext'>"
							+"<h5 class='w3-agilep'>地址:"+obj.uaddress+"</h5>"
							+"<h4>"+obj.uname+"</h4>"
							+"<p>接收类型:"+obj.frecepettype+"</p>"
						+"</div>"
					+"</div>"
				+"</div>";	
			    });
			    $("#showallfosterfamily").html(info);
			}
		
	</script>
	<!-- footer开始 -->
	<jsp:include page="footer.jsp"></jsp:include>
	<!-- footer结束 ---wwb -->
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>

	<a href="#home" id="toTop" class="scroll" style="display: block;">
		<span id="toTopHover" style="opacity: 1;"> </span>
	</a>



</body>
</html>